<!-- 搜索 -->
<template>
	<view>
		<!-- 定位 -->
		<view class="search-view">
			<image src="../static/icon/location.png" mode="widthFix"></image>
			<text class="search-text">正弘城</text>
			<text> > </text>
		</view>
		<!-- 搜索 -->
		<view class="search-cont">
			<view class="search" @click="seaRch()">
				<image src="../static/icon/search.png" mode="widthFix" class="search-img"></image>
				<input type="text" placeholder="搜索" disabled>
			</view>
		</view>
		<!-- 轮播选项 -->
		<view class="swiper-view">
			<swiper class="swiper" :autoplay="false" :interval="2000" :duration="1000" :indicator-dots="false"
				@change="bannerFun">
				<block v-for="(item,index) in label" :key="index">
					<swiper-item>
						<view class="swiper-item">
							<block v-for="(listdata,index) in item" :key="index">
								<view class="conteng-img">
									<image :src="listdata.img" mode="widthFix" class="uploadimg"></image>
									<text>{{listdata.tit}}</text>
								</view>
							</block>
						</view>
					</swiper-item>
				</block>
			</swiper>
			<!-- 指示点 -->
			<view class="instruct-view">
				<block v-for="(item,index) in instructdata" :key="index">
				<view class="instruct" :class="{active:index === num}">{{item}}</view>
			</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "search",
		data() {
			return {
				//面板指示点
				instructdata: ['',''],
				num: 0,
				//轮播渲染数据
				label: [
					[{
							'img': '../../static/swperPic/c6213db2a0bbc6b7342074e9eb51ca4a12844.png',
							'tit': '美食'
						},
						{
							'img': '../../static/swperPic/fee33972115b6dbc8f0450c9c015712b16444.png',
							'tit': '异国料理'
						},
						{
							'img': '../../static/swperPic/8ced60c2b71d719e1b15fd83d7402eba12998.png',
							'tit': '小吃馆'
						},
						{
							'img': '../../static/swperPic/58ffd634fa6dddf05972d2cf2c57733f14610.png',
							'tit': '鲜花蛋糕'
						},
						{
							'img': '../../static/swperPic/931b4bfa92a37d0f8c42b846f7d7c3b310738.png',
							'tit': '甜点饮品'
						},
						{
							'img': '../../static/swperPic/84154e5477cc35b12d0e31d55924edb916525.png',
							'tit': '生鲜果蔬'
						},
						{
							'img': '../../static/swperPic/325483c15c7e9550a43c917510bfcc6612958.png',
							'tit': '外卖专送'
						},
						{
							'img': '../../static/swperPic/8934983cf94fee9b898ffb66316d312d6588.png',
							'tit': '超市便利'
						},
						{
							'img': '../../static/swperPic/a21e2929ba2fa539323ef830260e9fd214345.png',
							'tit': '快食简餐'
						},
						{
							'img': '../../static/swperPic/99e79c1aa265c1bdb024c69d3d5b6a6714564.png',
							'tit': '早餐'
						},
					],
					[{
							'img': '../../static/swperPic/2/fcc082a6eaf5629defc545a613c7e18833016.png',
							'tit': '水果'
						},
						{
							'img': '../../static/swperPic/2/fc35df04faa62724013a7613ffb476928891.png',
							'tit': '日料'
						},
						{
							'img': '../../static/swperPic/7cb56f8d31e676ba08a17037d091a8d212894.png',
							'tit': '超市'
						},
						{
							'img': '../../static/swperPic/2/f6666d49f0defc15b562ffa21a30a2e37020.png',
							'tit': '奶茶'
						},
						{
							'img': '../../static/swperPic/2/ec00c0c96a6dd581f1aaf5a56c732a9c15606.png',
							'tit': '鲜花'
						},
						{
							'img': '../../static/swperPic/2/d5dac8ba49aadf0fba2b7d153552be7e16309.png',
							'tit': '美味沙拉'
						},
						{
							'img': '../../static/swperPic/2/b2e4c231f2f6d51dae2d2477d9c0d59e11334.png',
							'tit': '蛋糕'
						},
						{
							'img': '../../static/swperPic/2/66392e935b88c88b991fe6e38b0bf5f111846.png',
							'tit': '咖啡'
						},
						{
							'img': '../../static/swperPic/2/4641a3ad2b57992f7da02870350afbf916051.png',
							'tit': '日料火锅'
						},
						{
							'img': '../../static/swperPic/2/17abddebb8035f89e8df1445ac462d3614785.png',
							'tit': '美味炸鸡'
						},
					]
				]
			}
		},
		
		methods: {
			bannerFun(e) {
				this.num = e.detail.current
				console.log(e.detail.current)
			}
		}
	}
</script>


<style scoped>
	// 定位
	.search-view {
		display: flex;
		font-size: 35rpx;
		font-weight: 400;
		align-items: center;
		height: 80rpx;
		padding: 20rpx;


	}

	.search-view image {
		width: 35rpx;
		height: 35rpx;
	}

	.search-text {
		padding: 0 10rpx;
	}

	// 搜索


	.search {
		display: flex;
		flex-direction: row;
		height: 70rpx;
		line-height: 70rpx;
		background: #eff3f4;
		border-radius: 10rpx;
		// padding:auto 10rpx;

	}

	.search input {
		height: 70rpx;
		line-height: 70rpx;
		width: 100%;
		font-size: 25rpx;
		color: #666;
	}

	.search-img {
		margin: auto 0 auto 20rpx;
		width: 40rpx;
		height: 40rpx;
		// padding-right: 10rpx;
	}


	.search-cont {
		// display: flex;
		// justify-content: space-between;
		height: 70rpx;
		align-items: center;
		padding: 15rpx;
	}

	// 轮播图
	.swiper {
		height: 320rpx !important;
	}

	.swiper-item {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		height: 320rpx;

	}

	.conteng-img {
		width: 20vw;
		margin: 0;
		position: relative;
		text-align: center;
	}

	.conteng-img text {
		padding-top: 20rpx;
		font-size: 25rpx;
	}

	.uploadimg {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50rpx;
		display: block;
		margin: 0 auto;
	}

	// 指示点
	.instruct-view {
		display: flex;
		justify-content: center;
		padding-top: 10rpx;
	}

	.instruct {
		background: #e6e6e6;
		height: 10rpx;
		width: 30rpx;
		border-radius: 50rpx;
		margin: 0 10rpx;
	}

	.active {
		background: #fbae22 !important;
	}
</style>
